<template>
  <div class="passcheck">
    <div class="passcheck-container">
      <div class="modification-head clearfix">
        <div class="fl logo">
          <a href="/"><img src="/src/assets/img/logo.svg" alt="" /></a>
          <span> 通行证 </span>
        </div>
        <div class="fr exitplatform clearfix">
          <a class="tou-img"><img :src="baseUrl + userInfo.avatar" alt="" srcset="" /> <span>{{ userInfo.name }}</span>
          </a>
          |
          <a>返回平台</a>
          <a @click="this.$router.push('/personaldata')">退出</a>
        </div>
      </div>
      <div class="modification-body">
        <ul class="modification-ul">
          <li @click="clickshow()" :class="[activeClass ? ' ' : ' active ']">账号安全</li>
          <li @click="clickshow()" :class="[activeClass ? 'active ' : '  ']">第三方账号绑定</li>
        </ul>
        <div class="modification-con">
          <div class="acount-con " :class="[activeClass ? ' ' : ' active ']">
            <ul class="acount-ul">
              <li>
                <div class="row">
                  <div class="col-sm-1">用户名</div>
                  <div class="col-sm-9">{{ userInfo.name }}</div>
                  <div class="col-sm-2 tr">
                    <div class="overall-btn">
                      <a href="">更换</a>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="row">
                  <div class="col-sm-1">邮箱帐号</div>
                  <div class="col-sm-9">可以使用安全邮箱 4***4@qq.com (立即激活)马上登录</div>
                  <div class="col-sm-2 tr">
                    <div class="overall-btn">
                      <a href="">更换</a>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="row">
                  <div class="col-sm-1">手机帐号</div>
                  <div class="col-sm-9">可以使用手机18*******47马上登录</div>
                  <div class="col-sm-2 tr">
                    <div class="overall-btn">
                      <a href="javascript:;" @click="showphone1">更换</a>
                    </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="row">
                  <div class="col-sm-1">登录密码</div>
                  <div class="col-sm-9">
                    密码要求至少包含字母，符号或数字中的两项且长度超过8位，建议您经常修改密码，以保证帐号更加安全
                  </div>
                  <div class="col-sm-2 tr">
                    <div class="overall-btn">
                      <a href="">更换</a>
                    </div>
                  </div>
                </div>
              </li>
              <li class="apply-li">
                <a href="">申请注销</a>
              </li>
            </ul>
          </div>
          <div class="binding-con ta " :class="[activeClass ? 'active ' : '  ']">
            <ul class="binding-ul">
              <li class="clearfix">
                <div class="fl icon-box">
                  <span>
                    <i class="iconfont icon-weixin"></i>
                  </span>
                  微信
                </div>
                <div class="fl binding-div">未绑定</div>
                <div class="overall-btn fl">
                  <a href="">绑定</a>
                </div>
              </li>
              <li class="clearfix">
                <div class="fl icon-box">
                  <span>
                    <i class="iconfont icon-weibo"></i>
                  </span>
                  微博
                </div>
                <div class="fl binding-div">未绑定</div>
                <div class="overall-btn fl">
                  <a href="">绑定</a>
                </div>
              </li>
              <li class="clearfix">
                <div class="fl icon-box">
                  <span>
                    <i class="iconfont icon-qq1"></i>
                  </span>
                  QQ
                </div>
                <div class="fl binding-div">未绑定</div>
                <div class="overall-btn fl">
                  <a href="">绑定</a>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <FootCopyright></FootCopyright>
    <!-- 修改手机号-->
    <div class="tanchu-box" v-if="showphone">
      <div class="modify-avatar">
        <div class="colse pa" @click="hidephone">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <p class="tile">修改手机号</p>
        <div class="phone-box">
          <ul>
            <li class="phone-li">
              <p>原手机号</p>
              <input type="text" placeholder="请输入手机号" />
            </li>
            <li class="new-phone">
              <p>新手机号</p>
              <el-input v-model="input3" placeholder="新手机号" class="input-with-select">
                <template #prepend>
                  <el-select v-model="select" placeholder="+86" style="width: 80px">
                    <el-option label="+86" value="+86" />
                  </el-select>
                </template>
              </el-input>
            </li>
            <li>
              <div class="slider-demo-block">

                <SliderCheck ref="slider" style="width:100%"></SliderCheck>
                <!-- <el-slider v-model="value3" :show-tooltip="false" placeholder="请按住滑块，拖动到最右边" /> -->
              </div>
            </li>
            <li class="code-li">
              <input type="text" placeholder="验证码" /><button class="gain-btn">获取验证码</button>
            </li>
          </ul>
        </div>
        <div class="overall-btn ta">
          <a href="">保存</a>
          <a href="">取消</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SliderCheck from '@/components/Slide.vue'

import * as api from "@/api/users"
export default {
  components: {
    SliderCheck
  },
  data() {
    return {
      isActive: false,
      showphone: false,
      activeClass: false,

      // 用户信息
      userInfo: "",

      // 图片网址
      baseUrl: 'https://ui-mall.oss-accelerate.aliyuncs.com/',
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      try {
        let res = await api.UserInfoAPi()
        this.userInfo = res.data.data
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },



    async showphone1() {
      this.showphone = true
    },
    async hidephone() {
      this.showphone = false
    },

    async clickshow() {
      this.activeClass = !this.activeClass
    }
  }
}
</script>
<style></style>
